<template>
	<view class="sp-tag" :style="{ color: colorMap[text] }" :custom="custom">
		<label></label>
		<text>{{ text }}</text>
	</view>
</template>

<script>
export default {
	name: 'sp-tag',
	props: {
		text: {
			type: String,
			default: '未知'
		},
		custom: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			colorMap: {
			  '适量': '#79E984',
			  '偏多': '#FF9F58',
			  '偏少': '#91C1FF',
			  '过满': '#F86060',
			  '空槽': '#59D3D3',
			  '未知': '#C3C3C3',
			  'AI其他': '#fbd950'
			},
		}
	}
}
</script>

<style lang="scss">
	.sp-tag {
		position: absolute;
		top: 18rpx;
		right: 18rpx;
		background: rgba(0, 0, 0, .6);
		border-radius: 2px;
		padding: 8rpx 15rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		
		label {
			display: block;
			margin-right: 12rpx;
			width: 10rpx;
			height: 10rpx;
			border-radius: 50%;
			background: currentColor;
		}
	}
</style>